/*
 * @Description: 流转、退回弹窗
 * @Author: Rfan
 * @Date: 2022-02-24 16:16:12
 * @LastEditTime: 2022-05-25 08:55:50
 */

import { Button, Form, Input, Modal, Table } from 'antd';
import classNames from 'classnames/bind';
import { useFormatMessage } from '@/utils/intlHelpers';
import type { ICommonDialog } from '@/interfaces/global';
import styles from './styles/index.module.scss';

const cx = classNames.bind(styles);
const { Column } = Table;

interface ICirculationDialogProps extends ICommonDialog {
  title: string;
  data: any;
}

const CirculationDialog = (props: ICirculationDialogProps) => {
  const { visible, title, data, onClose } = props;
  const [form] = Form.useForm();

  const formatMessage = useFormatMessage();
  const applyForm = data?.applyForm || {};
  const archiveItemList = data?.archiveItemList || [];

  /**
   * @description: 关闭借阅详情弹窗
   */
  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      title={title}
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="submit" type="primary" onClick={onCancel}>
          确定
        </Button>
      ]}
    >
      <div className={cx('info')}>
        <Form form={form}>
          <Form.Item label="任务类型">{title}</Form.Item>
          <Form.Item label="退回库">{data.description}</Form.Item>
          <Form.Item label="任务名称">
            <Input />
          </Form.Item>
          <Form.Item label="任务说明">
            <Input.TextArea
              placeholder="备注信息描述，最多可填写2000字"
              maxLength={2000}
              showCount
            />
          </Form.Item>
        </Form>
      </div>
      <div className={cx('list')}>
        <h6>档案列表</h6>
        <Table dataSource={archiveItemList} rowKey="id" size="small" bordered>
          <Column title="序号" dataIndex="id" key="id" align="center" />
          <Column title="档号" dataIndex="archiveNo" key="archiveNo" align="center" />
          <Column title="题名" dataIndex="title" key="title" align="center" />
          <Column
            title="保管期限"
            dataIndex="archiveTypeName"
            key="archiveTypeName"
            align="center"
          />
          <Column title="份数" dataIndex="title" key="title" align="center" />
          <Column title="页数" dataIndex="title" key="title" align="center" />
        </Table>
      </div>
    </Modal>
  );
};

export default CirculationDialog;
